<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="案例">
        <ph-form>
          <ph-validator :validators="{ odd, range }">
            <ph-divider type="primary">内置验证器</ph-divider>
            <ph-form-input label="required" :validators="['required']" />
            <ph-form-input label="number" :validators="['number']" />
            <ph-form-input label="email" :validators="['email']" />
            <ph-form-input
              label="color"
              placeholder="hex,rgb,rgba,hls,hlsa"
              :validators="['color']"
            />
            <ph-form-input label="url" :validators="['url']" />
            <ph-form-input label="mobile" :validators="['mobile']" />
            <ph-form-input label="length" :validators="['length|5']" />
            <ph-form-input
              label="chinese"
              placeholder="请输入中文"
              :validators="['chinese']"
            />
            <ph-form-input
              label="regexp"
              placeholder="regexp|^[a-z]+$"
              :validators="['regexp|^[a-z]+$']"
            />

            <ph-divider type="primary">自定义奇数验证器odd</ph-divider>
            <ph-form-input label="odd" :validators="['odd']" />
            <ph-divider type="primary"
              >自定义数字范围带参数验证器range|5-10</ph-divider
            >
            <ph-form-input
              label="range"
              placeholder="range|5-10"
              :validators="['range|5-10']"
            />

            <ph-button-group :container="true" justify="center">
              <ph-form-submit type="primary" :radius="true"
                >提交</ph-form-submit
              >
            </ph-button-group>
          </ph-validator>
        </ph-form>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  PhView,
  PhTab,
  PhTabPanel,
  PhDivider,
  PhForm,
  PhValidator,
  PhFormInput,
  PhFormSubmit,
  PhButtonGroup,
} from "@/index";

// import * as Vs from "../../node_modules/phoeon/src/components/validator/validators";
// import * as Vs from '../../node_modules/phoeon/src/components/validator/validators'
import * as Data from "../data/validator";
const Vs = {}
export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhDivider,
    PhForm,
    PhValidator,
    PhFormInput,
    PhFormSubmit,
    PhButtonGroup,
  },
  setup() {
    //eg 自定义奇数验证
    const odd = function odd(
      v: unknown,
      args: string[],
      next: () => void,
      reject: (d?: any) => void
    ) {
      if (v === undefined) return next();
      if ((v as number) % 2) next();
      else
        reject({
          valid: false,
          tip: "该数字不是奇数",
        });
    };
    //eg 自定义数字范围验证 <ph-form-input :validators="['range|5,10']">
    const range = function number(
      v: unknown,
      args: string[],
      next: () => void,
      reject: (d?: any) => void
    ) {
      //args:['5','10']
      if (v === undefined) return next();
      const start = Number(args[0]);
      const end = Number(args[1]);
      const flag = Number(v) >= start && Number(v) <= end;
      if (flag) next();
      else
        reject({
          valid: false,
          tip: `非法数字,请输入${start}-${end}之间的数字`,
        });
    };
    return {
      vs: Object.keys(Vs),
      odd,
      range,
      ...Data,
    };
  },
});
</script>
